transition
Короткая запись изменения свойств
Свойство transition используется, когда нам нужно плавно изменить CSS-свойства между двумя состояниями элемента. Например, при наведении мышкой.
timing-function
Поведение анимации
Значения timing-function можно задать ключевыми словами или в формате cubic-bezier.
Кривая Безье
Если нужно что-то особенное, переходное поведение можно определить кривой Безье
transition-delay
Задержка изменения
Если нужно плавно изменить какое-то CSS-свойство, но запустить изменение не сразу, а с задержкой, то используем transition-delay .
transition-duration
За какое время изменения
Когда нам нужно сделать плавное изменение какого-то CSS-свойства, то браузеру нужно понимать, какое время займёт этот переход. Это время указывается в свойстве transition-duration .
transition-property
Анимирование сразу нескольких свойств
Если нам нужно анимировать переход нескольких свойств элемента (например, цвета и размера шрифта), то удобно перечислить их в свойстве transition-property .